<template>
  <div>
    <c-table
      :loading="loading"
      :height="height"
      :table-column="tableColumn"
      :table-data="list"
      :is-delete="isDelete"
      :operation="!disabled"
      @on-save="saveHandle"
      @on-delete="deleteHandle"
      @changeDescribe="changeDescribeHandle"
      @technologyColor="technologyColorHandle"
      @focus="focusHandle"
    ></c-table>
    <detail-dialog v-if="introData" :disabled="disabled" technology :detail-data="introData" @close="closeHandle"/>
    <change-detail-dialog v-if="changeData" :disabled="disabled" :type="this.deviceOrSystem" :change-data="changeData" @close="closeHandle"/>
  </div>
</template>

<script>
import { changeReasonList } from '@/utils/const.js'
import DetailDialog from '../quality/DetailDialog.vue'
import ChangeDetailDialog from '../technology/ChangeDetailDialog.vue'
import technologyApi from '@/apis/overview/technology.js'

export default {
  components: {DetailDialog, ChangeDetailDialog},
  props: {
    deviceOrSystem: { // DEVICE: 单机技术变更，SYSTEM: 系统技术状态变更
      type: String,
      default: 'DEVICE'
    },
    billType: { // NORMAL: 技术状态变更, TEMP: 临时技术状态变更
      type: String,
      default: 'NORMAL'
    },
    loading: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    isDelete: {
      type: Boolean,
      default: true
    },
    height: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }, 
  data() {
    return {
      deviceKey: 'DEVICE',
      tableColumn: {
        code: {
          label: this.deviceOrSystem == 'DEVICE' ? '单机代号' : '系统代号',
          columnProp: {
            align: 'center',
            formatter: this.codeFormatter
          }
        },
        name: {
          label: this.deviceOrSystem == 'DEVICE' ? '单机名称' : '系统名称',
          columnProp: {
            align: 'center',
            formatter: this.nameFormatter
          }
        },
        changeProject: {
          type: 'input',
          label: '变更项目',
          columnProp: {
            align: 'center',
          },
        },
        changeDescribe: {
          type: 'link',
          label: '变更概述',
          text: '查看详情',
          valueField: 'qualityTitle',
          columnProp: {
            align: 'center',
          },
        },
        technologyColor: {
          label: '变更落实情况',
          progress: true,
          value: 'technologyProp',
          linkText: '详情',
          columnProp: {
            align: 'center',
          },
        },
        changeReason: {
          type: 'select',
          label: '变更原因',
          selectOption: JSON.parse(JSON.stringify(changeReasonList)),
          columnProp: {
            align: 'center',
            'min-width': '140px',
          },
        },
        focus: {
          label: '关注',
          type: 'focus',
          columnProp: {
            align: 'center',
          }
        },
      },
      introData: null,
      changeData: null
    }
  },
  computed: {
    
  },
  watch: {
    deviceOrSystem(val) {
      if (val == this.deviceKey) {
        this.tableColumn.code.label = '单机代号'
        this.tableColumn.name.label = '单机名称'
      } else {
        this.tableColumn.code.label = '系统代号'
        this.tableColumn.name.label = '系统名称'
      }
    }
  },
  methods: {
    codeFormatter(row) {
      return this.deviceOrSystem == this.deviceKey ? row.deviceCode : row.sysCode
    },
    nameFormatter(row) {
      return this.deviceOrSystem == this.deviceKey ? row.deviceName : row.sysName
    },
    saveHandle(row) {
      technologyApi
        .technologyUpdate({
          id: row.id,
          changeProject: row.changeProject,
          changeReason: row.changeReason.code,
          type: this.deviceOrSystem,
        })
        .then(() => {
          this.$message.success('保存成功')
          row.edit = false
        })
    },
    deleteHandle(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        technologyApi.technologyDeleteById({ id: row.id }).then(() => {
          this.$message.success('删除成功')
          this.refresh()
        })
      })
    },
    changeDescribeHandle(row) {
      this.introData = row
    },
    technologyColorHandle(row) {
      this.changeData = row
    },
    focusHandle(row) {
      if (this.disabled) {
        return
      }
      technologyApi.qualityFocus({ id: row.id }).then(() => {
        // row.focus = row.focus == 1 ? 0 : 1
        this.refresh()
      })
    },
    closeHandle(refresh) {
      if (refresh) {
        this.refresh()
      }
      this.introData = null
      this.changeData = null
    },
    refresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style>

</style>